<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="select/jquery.min.js"></script>
    <script src="select/jquery.easydropdown.min.js"></script>

    <style>
        *{margin: 0; padding: 0;}
        /* --- EASYDROPDOWN DEFAULT THEME --- */

        /* PREFIXED CSS */

        .dropdown,
        .dropdown div,
        .dropdown li,
        .dropdown div::after{
            -webkit-transition: all 150ms ease-in-out;
            -moz-transition: all 150ms ease-in-out;
            -ms-transition: all 150ms ease-in-out;
            transition: all 150ms ease-in-out;
        }

        .dropdown .selected::after,
        .dropdown.scrollable div::after{
            -webkit-pointer-events: none;
            -moz-pointer-events: none;
            -ms-pointer-events: none;
            pointer-events: none;
        }

        /* WRAPPER */

        .dropdown{
            position: relative;
            width: 160px;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #fff;

            border-radius: 3px;

            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        .dropdown.open{
            z-index: 2;
        }

        .dropdown:hover{
            box-shadow: 0 0 5px rgba(0,0,0,.15);
        }

        .dropdown.focus{
            box-shadow: 0 0 5px rgba(51,102,248,.4);
        }

        /* CARAT */

        .dropdown .carat{
            position: absolute;
            right: 12px;
            top: 50%;
            margin-top: -4px;
            border: 6px solid transparent;
            border-top: 8px solid #000;
        }

        .dropdown.open .carat{
            margin-top: -10px;
            border-top: 6px solid transparent;
            border-bottom: 8px solid #000;
        }

        .dropdown.disabled .carat{
            border-top-color: #999;
        }

        /* OLD SELECT (HIDDEN) */

        .dropdown .old{
            position: absolute;
            left: 0;
            top: 0;
            height: 0;
            width: 0;
            overflow: hidden;
        }

        .dropdown select{
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .dropdown.touch .old{
            width: 100%;
            height: 100%;
        }

        .dropdown.touch select{
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        /* SELECTED FEEDBACK ITEM */

        .dropdown .selected,
        .dropdown li{
            display: block;
            font-size: 18px;
            line-height: 1;
            color: #000;
            padding: 9px 12px;
            overflow: hidden;
            white-space: nowrap;
        }

        .dropdown.disabled .selected{
            color: #999;
        }

        .dropdown .selected::after{
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 60px;

            border-radius: 0 2px 2px 0;
            box-shadow: inset -55px 0 25px -20px #fff;
        }

        /* DROP DOWN WRAPPER */

        .dropdown div{
            position: absolute;
            height: 0;
            left: -1px;
            right: -1px;
            top: 100%;
            margin-top: -1px;
            background: #fff;
            border: 1px solid #ccc;
            border-top: 1px solid #eee;
            border-radius: 0 0 3px 3px;
            overflow: hidden;
            opacity: 0;
        }

        /* Height is adjusted by JS on open */

        .dropdown.open div{
            opacity: 1;
            z-index: 2;
        }

        /* FADE OVERLAY FOR SCROLLING LISTS */

        .dropdown.scrollable div::after{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 50px;

            box-shadow: inset 0 -50px 30px -35px #fff;
        }

        .dropdown.scrollable.bottom div::after{
            opacity: 0;
        }

        /* DROP DOWN LIST */

        .dropdown ul{
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            list-style: none;
            overflow: hidden;
        }

        .dropdown.scrollable.open ul{
            overflow-y: auto;
        }

        /* DROP DOWN LIST ITEMS */

        .dropdown li{
            list-style: none;
            padding: 8px 12px;
        }

        /* .focus class is also added on hover */

        .dropdown li.focus{
            background: #d24a67;
            position: relative;
            z-index: 3;
            color: #fff;
        }

        .dropdown li.active{
            font-weight: 700;
        }

    </style>
</head>
<body>

<select class="dropdown" tabindex="7">

    <option value="1">Option 1</option>

    <option value="2">Option 2</option>

    <option value="3">Option 3</option>

    <option value="4">Option 4</option>

    <option value="5">Option 5</option>

</select>



</body>
</html>